<template>
  <div>
    <el-card class="filter-card">
      <el-alert title="网络不好,请稍后重试～" type="error" v-if="netStatus"></el-alert>
      <div slot="header">
        <!-- 面包屑路径导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
          <el-breadcrumb-item>评论管理</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- /面包屑路径导航 -->
      </div>
      <el-table v-loading="loading" :data="tableData" style="width: 100%">
        <el-table-column prop="title" label="文章标题" width="180"></el-table-column>
        <el-table-column prop="total_comment_count" label="总评论数" width="180"></el-table-column>
        <el-table-column prop="fans_comment_count" label="粉丝评论数"></el-table-column>
        <el-table-column prop="comment_status" label="评论状态">
          <template slot-scope="scope">
            <!-- 对应关系依照的就是接口文档
            不同的状态码渲染不同的视图  使用v-if v-else-if 完成-->
            <!--  如果数据中的comment_status为true表示  关闭
            如果数据中的comment_status为false表示 正常-->
            <el-tag v-if="scope.row.comment_status">关闭</el-tag>
            <el-tag v-else>正常</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="danger"
              size="small"
              @click="toggleComment(scope.row)"
              v-if="scope.row.comment_status"
            >打开评论</el-button>
            <el-button
              type="primary"
              size="small"
              @click="toggleComment(scope.row)"
              v-if="!scope.row.comment_status"
            >关闭评论</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 列表分页 -->
      <!-- layout:代表当前分页组件的结构  prev 上一页  pager 数字分页  next 下一页
            total 代表数据的总量一般来源于后端接口  分页逻辑： total / pageSize = pageNum
            page-size：每页显示条目个数，支持 .sync 修饰符 默认值 10  自定义之后默认值会被覆盖
      -->
      <el-pagination
        class="pageCont"
        :page-size="pageSize"
        layout="prev, pager, next"
        background
        :total="total_count"
        :small="true"
        @current-change="pageChange"
        :disabled="loading"
      ></el-pagination>
      <!-- /列表分页 -->
    </el-card>
  </div>
</template>

<script>
import { getComment, changeCommentStatus } from '@/api/comments'
export default {
  data() {
    return {
      total_count: 0,
      curPage: 1,//当前请求的是第几页的数据
      pageSize: 10,
      tableData: [],
      loading: true,
      netStatus: false
    }
  },
  methods: {
    hGetComment() {
      //获取评论列表
      getComment({
        response_type: 'comment',
        page: this.curPage
      }).then((res) => {
        console.log(res)
        this.tableData = res.data.data.results
        this.total_count = res.data.data.total_count
        this.loading = false
      }).catch(err => {
        console.dir(err)
        this.handleError(err)
      })
    },
    handleError(err) {
      if (err.message === "Network Error") {
        this.netStatus = true
        this.loading = false
      }
    },
    pageChange(page) {
      //当前页发生变化时  将当前页当成参数传递给后端拿到当前页对应的数据
      console.log('页码变了' + page)
      this.curPage = page
      this.hGetComment()
    },
    //打开/关闭评论
    toggleComment(row) {
      // console.log(row)
      //BigNumber不能直接用  需要调用toString
      let id = row.id.toString()
      changeCommentStatus(id, !row.comment_status).then(res => {
        row.comment_status = !row.comment_status
        this.$message.success('操作成功')
      }).catch(err => {
        this.$message.error('操作失败')
        this.handleError(err)
      })

    }
  },
  created() {
    this.hGetComment()
  }
}
</script>
<style lang="less">
body {
  margin: 0;
}
</style>